<template>
    <div>
      <span class="oil-card-tile">油卡信息</span><span class="oil-card-add" @click="addMore">添加</span>
      <el-table :data="tableData" class="tb-edit" border highlight-current-row
        style="margin: 0 4px;">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column label="油卡编号">
          <template slot-scope="scope">
            <el-input class="w200c" v-model="scope.row.cardSn"></el-input>
            <span>{{ scope.row.cardSn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发卡方">
          <template slot-scope="scope">
            <el-select class="w200c" v-model="scope.row.issuerType"  filterable remote reserve-keyword placeholder="请输入关键词"
                       :remote-method="getIssuerList"
                       @change="chooseIssuerOil(scope.row)"
                       :loading="loadingInfo">
              <el-option v-for="item in issuerList" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
            <span>{{ getIssuerName(scope.row.issuerType)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input class="w200c" v-model="scope.row.cardInfo"></el-input>
            <span>{{ scope.row.cardInfo }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="addFlag">
        <table class="add-asd-table" v-show="addTable">
          <tr>
            <td style="width: 60px"><span>#</span></td>
            <td>
              <el-input class="w200c" type="primary" v-model="tempInfo.cardSn"></el-input>
            </td>
            <td>
              <el-select class="w200c" v-model="tempInfo.issuerType"  filterable remote reserve-keyword placeholder="请输入关键词"
                         :remote-method="getIssuerList"
                         @change="chooseIssuerOilTemp()"
                         :loading="loadingInfo">
                <el-option v-for="item in issuerList" :key="item.id" :label="item.value" :value="item.id"></el-option>
              </el-select>
            </td>
            <td>
              <el-input class="w200c" type="primary" v-model="tempInfo.cardInfo"></el-input>
            </td>
          </tr>
        </table>
        <div style="margin-top: 10px">
          <div class="add-row" v-show="addFlag_confirm">
            <el-row>
              <el-col :span="18"><span style="color: rgba(0,0,0,0)">'</span></el-col>
              <el-col :span="6">
                <el-button type="primary" @click="add_confirm">确认添加</el-button>
                <el-button type="primary" @click="add_cancel">取消添加</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="add-row" v-show="addFlag_continue">
            <el-col :span="18"><span style="color: rgba(0,0,0,0)">'</span></el-col>
            <el-col :span="6">
              <el-button type="primary" @click="add_continue">继续添加</el-button>
              <el-button type="primary" @click="add_over">完成</el-button>
            </el-col>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import * as lspMgtAPI from '@/api/lspMgt'
  export default {
    name: 'oil-card',
    props: {
      tableData: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        issuerList: [],
        loadingInfo: false,
        temp: '',
        addFlag: false,
        addFlag_confirm: true,
        addFlag_continue: false,
        isAllNull: true,
        addTable: true,
        tempName: '',
        tempInfo: {
          cardSn: '',
          issuerType: '',
          cardInfo: ''
        }
      }
    },
    created() {
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].edit = false
        if (this.tableData[i].issuerType === null) {
          this.tableData[i].issuerType = ''
        } else {
          this.tableData[i].issuerType = this.tableData[i].issuerType.toString()
        }
      }
      lspMgtAPI.selectByVal({ val: '' }).then(res => {
        this.issuerList = res.data
      })
    },
    methods: {
      addMore() {
        this.addFlag = !this.addFlag
        this.addTable = true
        this.addFlag_confirm = true
        this.addFlag_continue = false
        if (this.addFlag === false) {
          this.tempInfo = {
            cardSn: '',
            issuerType: '',
            cardInfo: ''
          }
        }
      },
      // 获取发卡方
      getIssuerList(query) {
        const that = this
        that.loadingInfo = true
        lspMgtAPI.selectByVal({ val: query }).then(res => {
          that.issuerList = res.data
          that.loadingInfo = false
        })
      },
      // 获取发卡方名称
      getIssuerName(id) {
        for (let i = 0; i < this.issuerList.length; i++) {
          if (parseInt(id) === parseInt(this.issuerList[i].id)) {
            return this.issuerList[i].value
          }
        }
      },
      // 选择发卡方
      chooseIssuerOil(t) {
        const a = t.issuerTypeId
        for (let i = 0; i < this.issuerList.length; i++) {
          if (parseInt(a) === parseInt(this.issuerList[i].id)) {
            t.issuerTypeName = this.issuerList[i].value
          }
        }
      },
      // 添加模块油卡
      chooseIssuerOilTemp() {
        //
      },
      // 确认添加
      add_confirm() {
        if (!(this.tempInfo.cardSn && this.tempInfo.issuerType)) {
          this.$message({
            message: '请完整填写油卡信息！',
            type: 'error',
            duration: 2 * 1000
          })
        } else {
          this.tableData.push(this.tempInfo)
          this.tempInfo = {
            cardSn: '',
            issuerType: '',
            cardInfo: ''
          }
          this.addFlag_continue = true
          this.addFlag_confirm = false
          this.addTable = false
        }
      },
      // 取消添加
      add_cancel() {
        this.isAllNull = true
        this.addFlag = false
        this.addFlag_confirm = true
        this.addFlag_continue = false
        this.tempInfo = {
          cardSn: '',
          issuerType: '',
          cardInfo: ''
        }
      },
      // 继续添加
      add_continue() {
        this.addFlag_confirm = true
        this.addFlag_continue = false
        this.addTable = true
        //
      },
      // 添加完毕
      add_over() {
        this.isAllNull = true
        this.addFlag = false
        this.addFlag_confirm = true
        this.addFlag_continue = false
      }
    }
  }
</script>

<style scoped>
  .oil-card-tile{
    font-size: 16px;
    margin-bottom: 8px;
  }
  .oil-card-add{
    color: #3a8ee6;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px;
    margin-bottom: 8px;
  }
  .tb-edit .el-input {
    display: none
  }
  .tb-edit .el-select {
    display: none
  }
  .tb-edit .current-row .el-input {
    display: block
  }
  .tb-edit .current-row .el-select {
    display: block
  }
  .tb-edit .current-row .el-input+span {
    display: none
  }
  .tb-edit .current-row .el-select+span {
    display: none
  }
  .w200c{
    width: 200px !important;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .cell{
    text-align: center;
  }
  .add-asd-table{
    width: 100%;
    border-collapse: collapse;
    margin: 10px auto;
  }
  .add-row{
    height: 40px;
  }
</style>
